import * as React from 'react'
import {navigateTo, request, View} from "remax/wechat";
import {Button, SearchBar} from "annar";
import Block from "@/component/block";
import {usePageEvent} from "remax/macro";
import {origin} from "@/config/config";
import {VideoCategory} from "@/type/category";

const talks = [
    {
        key: "1",
        name: "djaijff"
    },
    {
        key: "2",
        name: "ddafa"
    },
    {
        key: "3",
        name: "ddasfa"
    }
]

export type Talk = {
    id: string
    name: string
}


const colors:string[] = ['secondary', 'secure', 'warning', 'light', 'medium dark', 'orange', 'anna']

export default () => {
    const [categories, setCategories] = React.useState<VideoCategory[]>([])
    const [talkList, setTalkList] = React.useState<Talk[]>([])
    const [value, setValue] = React.useState('')

    usePageEvent("onLoad", () => {
        request({
            url: `${origin}/category/getCategoryList`,
            success: (res) => {
                if (res.data.code === 200 && res.data.data !== []) {
                    let categoryList = res.data.data
                    setCategories(categoryList)
                }
            }
        }).then(()=>{
            request({
                url: `${origin}/talk/getTalkList`,
                success: (res) => {
                    if (res.data.code === 200 && res.data.data !== []) {
                        let talkList = res.data.data
                        setTalkList(talkList)
                    }
                }
            })
        })
    })

    const search = () => {
        wx.redirectTo({
            url: `/pages/search-item/index?aim=keyword&param=${value}`
        })
    }

    return (
        <View>
            <SearchBar
                style={{ margin: '0 10px' }}
                placeholder="搜索" value={value} onInput={(v) => {setValue(v)}} onSubmit={search}/>
            <Block noTitlePadding title="热点话题">
                <View>
                    {talkList.map(talk =>(
                        <Button
                            style={{margin: "10px"}}
                            look={colors[Number(talk.id) % colors.length]}
                            onTap={() => {
                                let aim = `keyword`
                                let param = `${talk.name}`
                                wx.redirectTo({
                                    url: `/pages/search-item/index?aim=${aim}&param=${param}`
                                })
                            }}
                        >
                            {talk.name}
                        </Button>))}
                </View>
            </Block>

            <Block noTitlePadding title="分类">
                <View>
                    {categories.map(category =>(
                        <Button
                            style={{margin: "10px"}}
                            look={colors[Number(category.id) % colors.length]}
                            onTap={() => {
                                let aim = `category`
                                let param = `${category.label}`
                                wx.redirectTo({
                                    url: `/pages/search-item/index?aim=${aim}&param=${param}`
                                })

                            }}
                        >
                            {category.name}
                        </Button>))}
                </View>
            </Block>
        </View>
    )
}